<template>
  <div class="home">
    <!-- 二级路由的坑 -->
    <router-view v-if="$route.path == '/home/search'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @click="$router.push('/home/search')"
      />
      <!-- 轮播图 -->
      <Swiper :bannerArr="bannerArr"></Swiper>
      <!--导航  -->
      <Grid :channelArr="channelArr"></Grid>
      <!-- 品牌制造商直供 -->
      <Brand :brandList="brandList"></Brand>
      <!-- 专题精选 -->
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="item in topicList" :key="item.id">
          <img :src="item.item_pic_url" alt="" />
          <p>
            {{ item.title }}
          </p>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Swiper from "@/components/Swiper.vue";
import Grid from "@/components/Grid.vue";
import Brand from "@/components/Brand.vue";
// 导入首页接口请求
import { getIndexData } from "@/utils/http";
// console.log(getIndexData);
export default {
  name: "Home",
  props: [""],
  data() {
    return {
      value: "", // 搜索的关键字
      bannerArr: [], // 轮播图数据
      channelArr: [], // 导航数组
      brandList: [], // 品牌制造商直供
      topicList: [], // 专题精选
    };
  },

  components: {
    Swiper,
    Grid,
    Brand,
  },
  created() {
    // console.log(this.$route.path);
    getIndexData().then((res) => {
      // console.log(res);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandList = res.data.data.brandList;
      this.topicList = res.data.data.topicList;
    });
  },

  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
.van-swipe-item img {
  width: 100%;
  height: 200px;
  display: block;
}
.home {
  padding-bottom: 50px;
}
</style>